<template>
  <view class="tabbar">
    <view
      v-for="item in tabs"
      :key="item.page"
      :class="['tab-item', isActive(item.page) ? 'active' : '']"
      @click="switchTab(item.page)"
    >
      <image :src="isActive(item.page) ? item.selectedIcon : item.icon" class="tab-icon" />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  const tabs = [
    {
      text: '订单大厅',
      page: '/driver/orderHall/index',
      icon: '/static/images/handle_i_no.png',
      selectedIcon: '/static/images/handle_i_yes.png'
    },
    {
      text: '订单管理',
      page: '/driver/orderManage/index',
      icon: '/static/images/outlets_i_no.png',
      selectedIcon: '/static/images/outlets_i_yes.png'
    },
    {
      text: '个人中心',
      page: '/driver/personalCenter/index',
      icon: '/static/images/mine_i_no.png',
      selectedIcon: '/static/images/mine_i_yes.png'
    }
  ]

  function isActive(page: string) {
    const pages = getCurrentPages()
    const current = pages[pages.length - 1]
    return current.route === page.replace(/^\//, '')
  }

  function switchTab(page: string) {
    if (!isActive(page)) {
      uni.reLaunch({ url: page })
    }
  }
</script>

<style scoped>
  .tabbar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 180rpx;
    background: #fff;
    border-top: 1px solid #eee;
    /* 添加安全区域适配 */
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 180rpx;
  }
  
  .tab-item {
    flex: 1;
    text-align: center;
    color: #999;
    font-size: 24rpx;
    padding: 10rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .tab-item.active {
    color: #d6246e;
  }
  
  .tab-icon {
    width: 48rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto 4rpx;
  }
</style>
